<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>仓库总库存</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
    <script src="${pageContext.request.contextPath }/js/monReport-data..monReport-data.js"></script>

</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>仓库总库存</cite>
        </a>
      </span>
</div>
<div class="x-body">

    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-input-inline">
                <div class="layui-input-inline" style="width: 155px">
                    <select  name="keyword" id="customer_id" lay-filter="keyword">
                        <option value="">--请选择供应商--</option>
                        <c:forEach items="${allCustomerList }" var="customer">
                            <option value="${customer.id}">${customer.customer_name }</option>
                        </c:forEach>
                    </select>
                    <input type="hidden" id="customerId" value="${customer_id}">
                </div>

                <div class="layui-input-inline" style="width: 150px">
                    <input class="layui-input" id="keyword2" placeholder="请输入SAP/QAD" style="width: 150px">
                </div>

               <%-- <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="test1" style="display: inline; width: 150px; margin-left: 10px">
                </div>--%>

                <div class="layui-input-inline" style="width: 30px"	>
                    <input type="hidden" id="dateTime" onchange="myFunction()">
                </div>

                <button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>	
         		<button class="layui-btn layui-btn-danger" id="export"><i class="layui-icon layui-icon-upload"></i>导出</button> 
           
           	 </div>

        </div>
    </div>

    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>



<script src="${pageContext.request.contextPath }/js/td/layuiRowspan.js" charset="utf-8"></script>
<script>

    $(document).ready(function () {

        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month) + "-" + (day);
        $('#dateTime').val(today);
    })





    layui.use(['form'], function() {
        form=layui.form;
        form.on('select(selectTime)', function(data){

        });

    });
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' ,//指定元素
            value: new Date(),
            done:function(value, date, endDate) {
                $('#dateTime').val(value);
            }

        });
    });

    var table;
    layui.use(['table','layer','upload','form','laydate'], function(){
        table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#date', //指定元素
            type: 'date',
            format: 'yyyy-MM-DD', //自动生成的时间格式
            btns: ['now', 'confirm']

        });

        var $ = layui.jquery, active = {
            reload:function () {

                var date = $('#dateTime').val();
                //产品名称
                var keyword2 = $.trim($("#keyword2").val());
                var customer_id = $("#customer_id").val();
                table.reload('tableList',{
                    method:'get'
                    ,where:{
                        'maName':keyword2
                        ,'date':date
                        ,'customer_id':customer_id
                    },
                    done:function(res, curr, count){


                        $('th').css({
                            'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                            //'font-size': 10,
                        })

                        merge(res);
                    }
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#date").val(curentMonth())
        $("#type").val('month')
        $('#type').attr("disabled",true)
        var customerId = $.trim($("#customerId").val());
        if(customerId != null && customerId != ""){
            $("#customer_id").val(customerId)
            $('#customer_id').attr("disabled",true)
            form.render();
        }


        var date = $('#dateTime').val();
        //产品名称
        var keyword2 = $.trim($("#keyword2").val());
        var customer_id = $("#customer_id").val();
        table.render({
            elem: '#tableList'
            ,where:{
                'maName':keyword2
                ,'date':date
                ,'customer_id':customer_id
            }
            ,url:'${pageContext.request.contextPath }/reportForm/getReportInventoryList.do'
            ,toolbar: '#toolbar'
            ,title: 'machineList'
            ,page: true
            ,limits:[10,20,30]
            //,defaultToolbar:['filter', 'print']
            ,request: {   //如果无需自定义请求参数，可不加该参数
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {   //如果无需自定义数据响应名称，可不加该参数
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,cols:	[[
                {type:'numbers',title: '序号', sort: true, fixed: 'left'},
                {field: 'mBatch', title: '供应商'},
                {field: 'sendName', title: 'SAP/QAD', templet:function (d) {
                	return d.materiel.materiel_num;
                }}
                ,{field: '', title: '物料名称', templet:function (d) {
                        return d.materiel.materiel_name;

                    }}
                ,{field: 'mNum', title: '实际数量'}
                ,{field: 'img_url', title: '有码库存'}
            ,{field: 'jNum', title: '无码库存'}
            ]]
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    //'font-size': 10,
                })
                merge(res);
            }
        });
        $("#export").click(function(){

            var date = $('#dateTime').val();
            //产品名称
            var keyword2 = $.trim($("#keyword2").val());
            var customer_id = $("#customer_id").val();
           
			
			window.location.href="${pageContext.request.contextPath }/reportForm/doExportall.do?date="+date+"&maName="+keyword2+"&customer_id="+customer_id;
       
        })


        //监听单元格事件
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            for (var i = 1; i <= 4; i++) {
                if(obj.event === ('tankuang'+i)){
                    tankuang(data.materiel.id,i)
                    break;
                }
            }
        });
        //获取当前日期
        function tankuang(id,type) {
            var divID  = "div"+type
            var title = "库存日报表-入库"
            if(type == 1){
                title = "库存日报表-入库"
            }else if(type == 2){
                title = "库存日报表-出库"
            }else if(type == 3){
                title = "库存日报表-返厂"
            }else if(type == 4){
                title = "库存日报表-退货"
            }
            layer.open({
                type: 1 					//Page层类型
                ,area: ['1380px', '600px'] 			//宽  高
                ,title: title
                ,shade: 0.6 				//遮罩透明度
                ,maxmin: true 				//允许全屏最小化
                ,anim: 1 					//0-6的动画形式，-1不开启
                ,content: $('#'+divID)
                ,end: function () {
                    var formDiv = document.getElementById(divID);
                    formDiv.style.display = '';
                }
                ,success: function(){
                    form.render();
                }
            });
        }
    });
    //获取当前日期
    function curentMonth() {
        var now=new Date();
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日
        var time=year+"-"+add0(month);
        return time;
    }
    function add0(m){return m<10?'0'+m:m }
    toastrStyle()




    //合并单元格
    function merge(res) {

        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['mBatch'];//需要合并的列名称
        var columsIndex = [1];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }
</script>
</body>
</html>
